<template>
  <div>
    <div class="grid-content bg-purple-light">
      <div class="content content2">
        <div class="header">
          <div class="title">
            销售数据
            <span class="time">{{ startTime }} ~ {{ endTime }}</span>
          </div>
          <div class="week-month-year">
            <div
              v-for="(item,index) in ['周','月','年']"
              :key="index"
              class="item"
              :class="{active:selDate===item}"
              @click="selDateFn(item)"
            >{{ item }}
            </div>
          </div>
        </div>
        <div class="echarts">
          <div id="maychar" />
          <div id="main" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { amountCollect, regionCollect } from '@/api'
import { parseTime, getFirstDayOfWeek } from '@/utils'
export default {
  data() {
    return {
      amountCollectList: null,
      dataList: [],
      regionCollectList: null,
      startTime: null,
      endTime: null,
      selDate: '周',
      collectType: 1
    }
  },
  async created() {
    this.startTime = parseTime(getFirstDayOfWeek(new Date()), '{y}-{m}-{d}')
    this.endTime = parseTime(new Date(), '{y}-{m}-{d}')
    this.dataList = this.getDay()
    await this.getEchartsFn(this.collectType, this.startTime, this.endTime)
    this.change()
    this.changetype()
  },
  methods: {
    // 封装请求
    async getEchartsFn(collectType, start, end) {
      const res = await amountCollect({
        collectType,
        start,
        end
      })
      const res1 = await regionCollect({
        start,
        end
      })
      this.regionCollectList = res1.data
      this.amountCollectList = res.data
      console.log(this.amountCollectList)
      this.amountCollectList.series = res.data.series.map(item => (item / 100))
      this.regionCollectList.series = this.regionCollectList.series.map(item => (item / 100))
    },
    // 获得星期数
    getDay() {
      let num = new Date().getDay()
      console.log(num)
      const arr = []
      for (let i = num - 1; i >= 0; i--) {
        // arr.push(num)
        arr[i] = num
        if (num === 0) {
          num = 6
        } else {
          num--
        }
      }
      const arr2 = ['日', '一', '二', '三', '四', '五', '六']
      for (let i = 0; i < arr.length; i++) {
        arr[i] = `星期${arr2[arr[i]]}`
      }
      return arr
    }, // 折线图
    changetype() {
      // 获取组件实例
      const machart = this.$echarts.init(document.getElementById('maychar'))
      // 设置配置项
      const option = {
        title: {
          text: '销售额趋势图',
          left: 'center',
          top: 'top',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '15%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: this.dataList,
          boundaryGap: false
        },
        yAxis: {
          name: '单位：元'
        },
        series: [
          {
            data: this.amountCollectList.series,
            type: 'line',
            stack: 'x',
            smooth: true,
            areaStyle: {},
            lineStyle: {
              color: 'rgba(171, 57, 57, 1)'
            }
          }
        ]
      }
      // 复制
      machart.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function() {
        machart.resize()
      })
    },
    // 基本柱形图
    change() {
      const chartBox = this.$echarts.init(document.getElementById('main'))
      const option = {
        title: {
          text: '销售额分布',
          left: 'center',
          top: 'top',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '15%',
          bottom: '10%'
        },
        xAxis: {
          data: this.regionCollectList.xAxis
        },
        tooltip: {},
        yAxis: {

          name: '单位：元'
        },
        series: [
          {
            barWidth: 18,
            type: 'bar',
            data: this.regionCollectList.series,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: '#94b1fd'
            }
          }
        ]
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function() {
        chartBox.resize()
      })
    },

    async selDateFn(item) {
      this.selDate = item
      if (item === '周') {
        this.collectType = 1
        this.startTime = parseTime(getFirstDayOfWeek(new Date()), '{y}-{m}-{d}')
        this.endTime = parseTime(new Date(), '{y}-{m}-{d}')
        this.dataList = this.getDay()
        await this.getEchartsFn(this.collectType, this.startTime, this.endTime)
        this.change()
        this.changetype()
      } else if (item === '月') {
        this.collectType = 1
        this.startTime = this.$store.getters.startTime
        this.endTime = parseTime(new Date(), '{y}-{m}-{d}')
        await this.getEchartsFn(this.collectType, this.startTime, this.endTime)
        const arr = this.amountCollectList.xAxis
        this.dataList = arr.map(item => parseTime(item, '{m}月{d}日'))
        this.change()
        this.changetype()
      } else {
        this.collectType = 2
        this.startTime = parseTime(getFirstDayOfWeek(new Date()), '{y}-01-01')
        this.endTime = parseTime(new Date(), '{y}-{m}-{d}')
        await this.getEchartsFn(this.collectType, this.startTime, this.endTime)
        const arr = this.amountCollectList.xAxis
        this.dataList = arr.map(item => parseTime(item, '{y}年{m}月'))
        this.change()
        this.changetype()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/count.scss";

#maychar {
  // max-height: 100%;
  // height: 100%;
  // max-height: 400px;
  flex: 1;

}

#main {
  flex: 1;
}

.content2 {
  background-color: #fff !important;
  background-image: none !important;
  min-height: 352px;
}

.echarts {
  display: flex;
  flex: 1;

}

.header {
  display: flex;
  justify-content: space-between;

  .week-month-year {
    display: flex;
    width: 129px;
    height: 34px;
    background: rgba(233, 243, 255, .37);
    border-radius: 10px;
    align-items: center;
    justify-content: center;

    .item {
      flex: 1;
      text-align: center;
      width: 37px;
      line-height: 25px;
      height: 25px;
      font-size: 14px;
      color: #9ca3b4;
      cursor: pointer;
    }
  }
}

.active {
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
  border-radius: 7px;
  font-weight: 600;
  color: #333 !important;
  background: #fff;
}
</style>
